<!--  -->
<template>
  <div class="category">
      <!-- <HeaderTop title="分类"></HeaderTop> -->
      <!-- 搜索框 -->
      <van-search class="search" placeholder="花茶" v-model="value" @search="onSearch"/>
      <section class="categorys">
        <!-- 左侧分类 -->
        <section class="menu-wrapper">
          <ul>
            <!-- <li v-for="(titleName,index) in titleNames" :key="index" :class="{on:activeName==titleName}" @click="selected(titleName)">{{titleName}}</li> -->
            <li v-for="(titleName,index) in sideList" :key="index" :class="{on:activeName==index}" @click="selected(index,titleName.id)">{{titleName.name}}</li>
          </ul>
        </section>
        <!-- 右侧列表 -->
        <section class="categorys-wrapper">
          <div class="banner">
            <img v-if="sideList[this.activeName]" :src="sideList[this.activeName].picUrl" alt="">
            <img v-if="!sideList[this.activeName]" src="./img/banner.jpg" alt="">
          </div>
          <div class="categorys-list">
            <p @click="gotoList">所有产品 <img src="./img/arrow.png" alt=""></p>
            <ul class="categorys-list-ul">
              <li class="categorys-list-li" v-for="(item,index) in categoryList" :key="index" @click="goToGoodsDetail(item.id)">
                <!-- <img v-if="!item.picUrl" style="border:1px solid #D5D5D5" src="" alt=""> -->
                <div class="img" :style="{backgroundImage:'url(' + item.picUrl + ')'}">
                  <!-- <img :src="item.picUrl" alt=""> -->
                </div>
                <p>{{item.name}}</p>
              </li>
            </ul>
          </div>
        </section>
      </section>
  </div>
</template>

<script>
// import HeaderTop from '../../components/HeaderTop/HeaderTop'
// import {mapActions} from 'vuex'
// import {mapState} from 'vuex'
export default {
  data () {
    return {
      value:'',
      activeName:0,
      parentId:0,
      sideList:[],
      categoryList:[],
      bannerImg:''
    };
  },
  mounted(){
    // 初始页面展示 parentId=0 是侧边栏列表
    this.initCategroy(0)
    // this.initCategoryList(this.initId)
  },
  // components: {
  //   HeaderTop
  // },

  computed: {
    // ...mapState(['category'])
  },

  methods: {
    async initCategroy(id){
      const result = await this.API.reqCategory(id)
      console.log(result)
      if(result.retCode === '000'){
        this.sideList = result.retData
        this.bannerImg = result.retData[id].picUrl
        this.initId = result.retData[id].id
        this.initCategoryList(this.initId)
      }
    },
    async initCategoryList(id){
      console.log('id',id)
      const result = await this.API.reqCategory(id)
      console.log(result)
      if(result.retCode === '000'){
        this.categoryList = result.retData
      }
    },
    onSearch(){
      this.$router.push({path:'/goodslist', query:{s:this.value,moduleId:5}})
    },
    selected(titleName,id){
      console.log(titleName)
      this.activeName = titleName
      this.initCategoryList(id)
      // const result = await this.API.reqCategory(titleName+1)
      // if(result.retCode === '000'){
      //   this.categoryList = result.retData
      // }
    },
    gotoList(){
      this.$router.push({path:'/goodslist', query:{moduleId:5,s:'ALL'}})
    },
    goToGoodsDetail(id){
      console.log(id)
      this.$router.push({path:'/goodslist', query:{moduleId:1,s:id}})
    },
    // ...mapActions(['getCategory'])
  }
}

</script>
<style lang='stylus'>
  .van-search
    .van-cell
      height 0.85rem
</style>

<style lang='stylus' scoped>
  @import "../../common/stylus/mixins.styl"
  .category
    width 100% 
    min-height 92.5%
    background-color #fff
    padding-bottom 0px !important
    margin-bottom 50px
    .categorys
      width 100%
      height 100%
      display flex
      background-color #fff
      .menu-wrapper
        width 30%
        li
          height 60px
          line-height 60px
          padding-left 20px
          font-size 14px
          font-weight 600
          &.on
            border-left 2px solid #145B3E
      .categorys-wrapper
        width 70%
        padding 10px
        background-color #fff
        padding-bottom 30px
        .banner
          width 100%
          height 98px
          overflow hidden
          border-radius 5px
          img 
            width 100%
            background #000
        .categorys-list
          p
            text-align right
            height 30px
            line-height 30px 
            font-size 12px
            padding 10px 0
            img 
              height 7px
          .categorys-list-ul
            display flex
            flex-wrap wrap
            .categorys-list-li
              width 75px
              margin-right 7px
              .img 
                width 75px
                height 75px
                border-radius 5px
                background-color #f5f5f5
                background-size cover
                background-repeat no-repeat
                background-position center center
              p
                text-align center
</style>